<template>
  <div class="caseRateConfig">
    <div class="rateBoxAll" v-if="showFlag">
      <div class="rateBox">
        <h3>
          <p>
            <span>C级考核</span>
            <span v-if="!wuFlag" :class="configData.levelC.isReach ? 'da' : 'wei'">
              {{ configData.levelC.isReach ? '已达标' : '未达标' }}
            </span>
          </p>
          <rate-list-details
            :wuFlag="wuFlag"
            :listData="configData ? configData.levelC.assessItems : []"></rate-list-details>
        </h3>
      </div>
      <div class="rateBox">
        <h3>
          <p>
            <span>B级考核</span>
            <span v-if="!wuFlag" :class="configData.levelB.isReach ? 'da' : 'wei'">
              {{ configData.levelB.isReach ? '已达标' : '未达标' }}
            </span>
          </p>
          <rate-list-details
            :wuFlag="wuFlag"
            :listData="configData ? configData.levelB.assessItems : []"></rate-list-details>
        </h3>
      </div>
      <div class="rateBox">
        <h3>
          <p>
            <span>A级考核</span>
            <span v-if="!wuFlag" :class="configData.levelA.isReach ? 'da' : 'wei'">
              {{ configData.levelA.isReach ? '已达标' : '未达标' }}
            </span>
          </p>
          <rate-list-details
            :wuFlag="wuFlag"
            :listData="configData ? configData.levelA.assessItems : []"></rate-list-details>
        </h3>
      </div>
    </div>
    <div v-else class="zan">暂无数据</div>
  </div>
</template>

<script>
  import rateListDetails from './rateListDetails.vue'
  export default {
    name: 'rate',
    components: {
      rateListDetails
    },
    data() {
      return {
        configData: {},
        showFlag: false,
        wuFlag: false
      }
    },
    methods: {
      updateDate() {
        this.$emit('updateAll')
      },
      show(val, wuFlag) {
        console.log(wuFlag, '333')
        this.wuFlag = wuFlag
        if (val) {
          this.configData = val
          this.showFlag = true
        } else {
          this.showFlag = false
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .caseRateConfig {
    .rateBoxAll {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .rateBox {
        padding: 0 20px 20px;
        width: 32%;
        background: #fff;
        margin-top: 20px;

        h3 {
          font-weight: normal;
          font-size: 16px;
          // span {
          //
          //   color: #2d8cf0;
          //   cursor: pointer;
          // }
          p {
            padding-top: 10px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 1px rgba(239, 239, 239, 1) solid;
            line-height: 52px;
            font-weight: bold;
            color: #333333;
            .da {
              color: rgba(96, 210, 136, 1);
              font-weight: normal;
              font-size: 14px;
            }
            .wei {
              font-weight: normal;
              color: rgba(255, 103, 103, 1);
              font-size: 14px;
            }
          }
        }
      }
    }
    .zan {
      padding-top: 140px;
      text-align: center;
    }
  }
</style>
